<template>
  <layout
    tabbar="/pages/team/index"
    navbar="none"
    :showBack="false"
    class="dark-theme"
    navbarBackgroundColor="#020303"
  >
    <view class="team-page">
      <tn-nav-bar
        fixed
        backgroundColor="#020303"
        :isBack="false"
        fontColor="#FFFFFF">
        <!-- 修改游戏账号选择器，显示昵称、区服和段位 -->
        <view slot="left" class="nav-left" @click="toggleAccountSelector">
          <view class="account-selector">
            <image :src="currentGameAccount.avatar" class="account-avatar" mode="aspectFill"></image>
            <view class="account-info">
              <text class="account-name">{{currentGameAccount.nickname}}</text>
              <view class="account-rank-server">
                <text class="account-server">{{currentGameAccount.serverType === 'wechat' ? '微信区' : 'QQ区'}}</text>
                <text class="account-rank">{{currentGameAccount.rank}}</text>
              </view>
            </view>
            <text class="tn-icon-down account-arrow"></text>
          </view>
        </view>

        <view class="nav-title">
          组队大厅
        </view>
      </tn-nav-bar>

      <!-- 使用tn-popup替代uni-popup -->
      <tn-popup
        mode="bottom"
        v-model="showAccountSelectorPopup"
		:border-radius="20"
        backgroundColor="#202020"
        @close="hideAccountSelector"
      >
        <view class="account-popup">
          <view class="account-popup-header">
            <text class="popup-title">切换游戏账号</text>
            <!-- 添加刷新按钮 -->
            <text class="tn-icon-refresh refresh-btn" @tap="refreshAccountList"></text>
            <text class="tn-icon-close" @tap="hideAccountSelector"></text>
          </view>

          <!-- 添加组队记录入口 -->
          <view class="team-records-entry" @tap="goToTeamRecords">
            <text class="tn-icon-history records-icon"></text>
            <text class="records-text">组队记录</text>
            <text class="tn-icon-right records-arrow"></text>
          </view>

          <!-- 加载状态 -->
          <view class="loading-container" v-if="accountsLoading">
            <view class="loading-spinner"></view>
            <text class="loading-text">加载中...</text>
          </view>

          <!-- 无账号提示 -->
          <view class="empty-account-tip" v-else-if="gameAccounts.length === 0">
            <text class="tn-icon-info empty-icon"></text>
            <text class="empty-text">您还没有添加游戏账号</text>
            <text class="empty-sub-text">请点击下方按钮添加</text>
          </view>

          <!-- 账号列表，添加滚动支持 -->
          <scroll-view
            class="account-list-scroll"
            v-else
            scroll-y="true"
            show-scrollbar="false"
          >
            <view class="account-list">
              <view
                class="account-item"
                v-for="(account, index) in gameAccounts"
                :key="index"
                :class="{
                  'active': currentGameAccount.id === account.id,
                  'disabled': account.auditStatus === 2
                }"
                @tap="switchAccount(account)"
              >
                <view class="item-info">
                  <text class="item-name">{{account.nickname}}</text>
                  <view class="item-game-rank">
                    <text class="item-server">{{account.serverType === 'wechat' ? '微信区' : 'QQ区'}}</text>
                    <text class="item-rank">{{account.rank}}</text>
                    <!-- 状态标签 -->
                    <text class="item-status" :class="{
                      'status-pending': account.auditStatus === 0,
                      'status-approved': account.auditStatus === 1,
                      'status-rejected': account.auditStatus === 2
                    }">
                      {{account.auditStatus === 0 ? '待审核' : account.auditStatus === 1 ? '已通过' : '已拒绝'}}
                    </text>
                  </view>
                </view>
                <view class="item-actions">
                  <text class="tn-icon-check item-check" v-if="currentGameAccount.id === account.id"></text>
                  <!-- 根据审核状态显示不同的按钮 -->
                  <text
                    v-if="account.auditStatus === 1"
                    class="tn-icon-edit item-edit"
                    @tap.stop="editGameAccount(account)"
                  ></text>
                  <text
                    v-else
                    class="tn-icon-refresh item-resubmit"
                    @tap.stop="resubmitGameAccount(account)"
                  ></text>
                </view>
              </view>
            </view>
          </scroll-view>
          <view class="account-popup-footer">
            <button class="add-account-btn" @tap="addGameAccount">
              <text class="tn-icon-add"></text>
              添加游戏账号
            </button>
          </view>
        </view>
      </tn-popup>

      <!-- 邀请好友弹窗 -->
      <tn-popup
        mode="center"
        v-model="showInvitePopup"
        :border-radius="20"
        backgroundColor="#202020"
        @close="hideInvitePopup"
      >
        <view class="invite-popup">
          <view class="invite-popup-header">
            <text class="popup-title">邀请好友</text>
            <text class="tn-icon-close close-btn" @tap="hideInvitePopup"></text>
          </view>

          <view class="invite-content">
            <view class="invite-icon">
              <text class="tn-icon-team-fill"></text>
            </view>
            <text class="invite-message">{{ inviteMessage }}</text>
          </view>

          <view class="invite-actions">
            <!-- #ifdef MP-WEIXIN -->
            <!-- 微信小程序环境只显示分享按钮 -->
            <button
              class="invite-btn share-btn full-width"
              open-type="share"
              @tap="onShareButtonTap"
            >
              <text class="tn-icon-share"></text>
              微信分享
            </button>
            <!-- #endif -->

            <!-- #ifndef MP-WEIXIN -->
            <!-- 非微信环境显示复制链接按钮 -->
            <button
              class="invite-btn copy-btn full-width"
              @tap="copyInviteLink(currentInviteTeam)"
            >
              <text class="tn-icon-copy"></text>
              复制链接
            </button>
            <!-- #endif -->
          </view>
        </view>
      </tn-popup>

      <!-- 使用z-paging实现分页 -->
      <z-paging
        ref="paging"
        v-model="teamList"
        @query="queryList"
        :default-page-size="20"
        :auto="true"
        :paging-style="{paddingTop: vuex_status_bar_height + 44 + 'px'}"
        :bg-color="'#020303'"
        :loading-more-enabled="true"
        :show-refresher-when-reload="true"
        :refresher-threshold="80"
        :refresher-default-text="'下拉刷新'"
        :refresher-pulling-text="'释放立即刷新'"
        :refresher-refreshing-text="'加载中...'"
        :loading-more-custom-style="{color: '#B3F73C'}"
        :show-loading-more-no-more-view="false"
        :hide-loading-more-when-no-more-and-inside-of-paging="true"
        :empty-view-text="'暂无开黑队伍'"
        :empty-view-reload-text="'点击刷新'"
        :show-empty-view-reload="true"
        :auto-show-back-to-top="false"
        :auto-clean-list-when-reload="true"
        :fixed="true"
        :safe-area-inset-bottom="true"
        :autoHeightAddition="-50"
        :auto-height="true"
        :system-container-height="true"
        @scrolltolower="handleScrollToLower"
        @scrolltoupper="handleScrollToUpper"
        @scroll="handleScroll"
        @refresherRefresh="onRefresh"
      >
        <template #bottom>
          <view style="height: 100rpx;"></view>
        </template>

        <!-- 段位筛选 -->
        <view class="rank-filter">
          <view class="filter-header">
            <view class="filter-row">
              <text class="filter-title">段位筛选</text>
              <view class="rank-list-container">
                <scroll-view scroll-x="true" class="rank-list" show-scrollbar="false">
                  <view
                    class="rank-item"
                    :class="{'active': currentRankId === 0}"
                    @tap="selectRank(0)"
                  >全部</view>
                  <view
                    v-for="(rank, index) in ranks"
                    :key="index"
                    class="rank-item"
                    :class="{'active': currentRankId === rank.id}"
                    @tap="selectRank(rank.id)"
                  >
                    {{ rank.name }}
                  </view>
                </scroll-view>
              </view>
              <view class="more-filters" @tap="toggleMoreFilters">
                <text>{{ showMoreFilters ? '收起' : '更多' }}</text>
                <text :class="['tn-icon-' + (showMoreFilters ? 'up' : 'down')]"></text>
              </view>
            </view>
          </view>
        </view>

        <!-- 区服筛选 - 只在点击更多筛选后显示 -->
        <view class="server-filter" v-if="showMoreFilters">
          <view class="filter-header">
            <view class="filter-row">
              <text class="filter-title">区服筛选</text>
              <view class="server-list-container">
                <scroll-view scroll-x="true" class="server-list" show-scrollbar="false">
                  <view
                    class="server-item"
                    :class="{'active': currentServerType === 'all'}"
                    @tap="selectServer('all')"
                  >全部</view>
                  <view
                    class="server-item"
                    :class="{'active': currentServerType === 'wechat'}"
                    @tap="selectServer('wechat')"
                  >微信区</view>
                  <view
                    class="server-item"
                    :class="{'active': currentServerType === 'qq'}"
                    @tap="selectServer('qq')"
                  >QQ区</view>
                </scroll-view>
              </view>
            </view>
          </view>
        </view>

        <!-- 队伍类型筛选 - 只在点击更多筛选后显示 -->
        <view class="team-type-filter" v-if="showMoreFilters">
          <view class="filter-header">
            <view class="filter-row">
              <text class="filter-title">类型筛选</text>
              <view class="type-list-container">
                <scroll-view scroll-x="true" class="type-list" show-scrollbar="false">
                  <view
                    class="type-item"
                    :class="{'active': currentTeamType === 'all'}"
                    @tap="selectTeamType('all')"
                  >全部</view>
                  <view
                    class="type-item"
                    :class="{'active': currentTeamType === 'rank'}"
                    @tap="selectTeamType('rank')"
                  >排位赛</view>
                  <view
                    class="type-item"
                    :class="{'active': currentTeamType === 'fun'}"
                    @tap="selectTeamType('fun')"
                  >娱乐局</view>
                  <view
                    class="type-item"
                    :class="{'active': currentTeamType === 'social'}"
                    @tap="selectTeamType('social')"
                  >找对象</view>
                </scroll-view>
              </view>
            </view>
          </view>
        </view>

        <!-- 团队列表 -->
        <view
          v-for="(team, index) in teamList"
          :key="team.id"
          class="team-card"
        >
          <view class="team-header">
            <view class="team-creator">
              <image :src="team.creatorAvatar" class="creator-avatar" :class="{'male-border': team.creatorGender === 1, 'female-border': team.creatorGender !== 1}" mode="aspectFill"></image>
              <view class="creator-info">
                <view class="creator-name">
                  {{ team.creatorName || '匿名' }}
                  <text :class="['gender-icon', team.creatorGender === 1 ? 'male' : 'female']">
                    <text v-if="team.creatorGender === 1" class="tn-icon-sex-male"></text>
                    <text v-else class="tn-icon-sex-female"></text>
                  </text>
                </view>
                <view class="creator-rank">
                  <view class="rank-badge">{{ team.rankName }}</view>
                  <view class="server-badge">{{ team.serverType === 'wechat' ? '微信区' : 'QQ区' }}</view>
                  <view class="team-type-badge">
                    {{ team.teamType === 'rank' ? '排位' : (team.teamType === 'fun' ? '娱乐' : '社交') }}
                  </view>
                </view>
                <view class="creator-success-count">
                  <text class="tn-icon-flag"></text>
                  <text>成功组队: {{ team.creatorSuccessCount }}次</text>
                </view>
              </view>
            </view>
            <view class="team-status">
              <text>{{ team.teamStatus }}</text>
            </view>
          </view>

          <view class="team-info">
            <view class="team-title">{{ team.title }}</view>
            <view class="team-desc">{{ team.description }}</view>

            <view class="team-details">
              <view class="team-detail">
                <text class="tn-icon-time"></text>
                <text>{{ team.createTime }}</text>
              </view>
              <view class="team-detail">
                <text class="tn-icon-people"></text>
                <text>{{ team.currentMembers }}/{{ team.maxMembers }}</text>
              </view>
              <view class="team-detail">
                <text class="tn-icon-location"></text>
                <text>{{ team.location }}</text>
              </view>
            </view>
          </view>

          <view class="team-members">
              <view class="team-member" v-for="(member, mIndex) in team.members" :key="mIndex" :class="{'current-user': member.isCurrentUser}">
                <image :src="member.avatar" class="member-avatar" :class="{'male-border': member.sex === 1, 'female-border': member.sex !== 1}" mode="aspectFill"></image>
                <view class="member-position">{{ getPositionName(team, member.position) }}</view>
                <!-- 当前用户标记 -->
                <view class="current-user-badge" v-if="member.isCurrentUser">
                  <text>我</text>
                </view>
              </view>
              <view
                v-for="(emptySlot, emptyIndex) in getEmptySlots(team)"
                :key="emptySlot.emptyId"
                class="team-member empty"
              >
                <text class="tn-icon-add"></text>
              </view>
            </view>

                    <!-- 游戏ID和联系方式信息面板 -->
          <view class="game-id-panel" v-if="team.currentMembers > 0">
            <view class="panel-header">
              <text class="panel-title">游戏ID 与 联系方式</text>
              <view class="lock-status" v-if="!team.isContactUnlocked">
                <text class="tn-icon-lock"></text>
                <text v-if="team.joinedByCurrentUser">凑齐5人开黑后解锁</text>
                <text v-else-if="!team.joinedByCurrentUser && team.isTeamFull">队伍已满，仅成员可见</text>
                <text v-else>仅队伍成员可见</text>
              </view>
              <!-- 解锁状态不显示任何内容，界面更简洁 -->
            </view>

            <view class="game-ids-list">
              <view
                class="game-id-item"
                v-for="(member, index) in team.members"
                :key="index"
                :class="{'locked': !team.isContactUnlocked, 'current-user': member.isCurrentUser}"
              >
                <view class="id-position">
                  {{ getPositionName(team, member.position) }}
                </view>
                <view class="id-value">
                  <template v-if="team.isContactUnlocked">
                    <view class="id-row">
                      <text class="id-label">ID:</text>
                      <text>{{ member.gameId }}</text>
                    </view>
                    <view class="id-row">
                      <text class="id-label">{{ team.serverType === 'wechat' ? '微信' : 'QQ' }}:</text>
                      <text>{{ member.contactNumber }}</text>
                    </view>
                  </template>
                  <template v-else>••••••••</template>
                </view>
                <view class="id-actions" v-if="team.isContactUnlocked">
                  <view class="id-copy" @tap="copyGameId(member.gameId)">
                    <text class="tn-icon-copy"></text>
                    <text class="copy-label">复制ID</text>
                  </view>
                  <view class="id-copy" @tap="copyContact(member.contactNumber)">
                    <text class="tn-icon-copy"></text>
                    <text class="copy-label">复制{{ team.serverType === 'wechat' ? '微信' : 'QQ' }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <!-- 邀请提示 - 仅显示给已加入的用户且队伍未满 -->
          <view
            class="invite-tip"
            v-if="team.joinedByCurrentUser && team.currentMembers < 5 && team.currentMembers >= 2"
          >
            <text class="tn-icon-info"></text>
            <text>再邀请{{5 - team.currentMembers}}人即可解锁游戏ID和联系方式</text>
          </view>

          <view class="team-actions">
            <button
              class="action-btn join-btn"
              :class="{
                'full': team.currentMembers >= team.maxMembers,
                'joined': team.joinedByCurrentUser && team.currentMembers < team.maxMembers,
                'completed': team.joinedByCurrentUser && team.currentMembers >= team.maxMembers
              }"
              :disabled="team.currentMembers >= team.maxMembers"
              @tap="joinTeam(team)"
            >
              <text v-if="team.joinedByCurrentUser && team.currentMembers >= team.maxMembers">
                组队已满
              </text>
              <text v-else-if="team.joinedByCurrentUser">
                退出
              </text>
              <text v-else>{{ team.currentMembers >= team.maxMembers ? '已满员' : '加入' }}</text>
            </button>
            <!-- #ifdef MP-WEIXIN -->
            <button
              class="action-btn chat-btn"
              :open-type="team.currentMembers >= team.maxMembers ? '' : 'share'"
              @tap="team.currentMembers >= team.maxMembers ? createNewTeam() : prepareShare(team)"
            >
              <text :class="team.currentMembers >= team.maxMembers ? 'tn-icon-add' : 'tn-icon-share'"></text>
              {{ team.currentMembers >= team.maxMembers ? '创建组队' : '邀请' }}
            </button>
            <!-- #endif -->
            <!-- #ifndef MP-WEIXIN -->
            <button
              class="action-btn chat-btn"
              @tap="team.currentMembers >= team.maxMembers ? createNewTeam() : showInviteModal(team)"
            >
              <text :class="team.currentMembers >= team.maxMembers ? 'tn-icon-add' : 'tn-icon-share'"></text>
              {{ team.currentMembers >= team.maxMembers ? '创建组队' : '邀请' }}
            </button>
            <!-- #endif -->
          </view>
        </view>
      </z-paging>

      <!-- 自定义置顶按钮 -->
      <view class="back-to-top-button" :class="{'active': showBackToTop, 'clicking': isScrollingToTop}" @tap="scrollToTop" v-if="showBackToTop">
        <view class="rocket-icon">
          <view class="rocket-body"></view>
          <view class="window"></view>
          <view class="fin fin-left"></view>
          <view class="fin fin-right"></view>
          <view class="exhaust-flame"></view>
        </view>
        <view class="flight-path" v-if="isScrollingToTop">
          <view class="particle" v-for="i in 5" :key="i"></view>
        </view>
      </view>

      <!-- 创建队伍按钮 -->
      <view class="fab-button" @tap="goToCreateTeam">
        <text class="tn-icon-add"></text>
      </view>
    </view>
  </layout>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import layout from '@/components/layout/layout.vue';
import { getGameKingTeamPage, getUserGameAccounts, getGameKingTeam } from '@/api/game/index.js';
import { getAllRanks, getRankNameById, getRandomInviteMessage, getRandomShareTitleWithImage } from '@/utils/constants.js';
import config from '@/config/index.js';

export default {
  components: {
    layout
  },
  data() {
    return {
      teamList: [],
      ranks: getAllRanks(),
      currentRankId: 0,
      currentServerType: 'all', // 当前选择的区服类型，默认为全部
      showBackToTop: false,
      isScrollingToTop: false,
      scrollTop: 0,
      // 控制账号选择器弹窗显示状态
      showAccountSelectorPopup: false,
      // 控制邀请弹窗显示状态
      showInvitePopup: false,
      // 当前邀请的队伍
      currentInviteTeam: null,
      // 邀请消息
      inviteMessage: '',
      // 游戏账号相关数据
      currentGameAccount: {
        id: 0,
        nickname: '请选择账号',
        avatar: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/f58cad729ce47acb65666e57496f5e2e0c8badfec8355cfc7d6f2645f8738e60.jpeg',
        rank: '',
        gameId: '',
        serverType: 'wechat',
        contactNumber: ''
      },
      gameAccounts: [],
      // 添加账号加载状态
      accountsLoading: false,
      showMoreFilters: false, // 控制是否显示更多筛选条件
      currentTeamType: 'all', // 当前选择的队伍类型，默认为全部
      // 分享配置
      shareConfig: {
        title: '',
        path: '',
        imageUrl: '',
        team: null
      }
    };
  },
  created() {
    // 组件创建时获取用户游戏账号列表
    this.fetchUserGameAccounts();
  },

  // #ifdef MP-WEIXIN
  onShareAppMessage(res) {
    // 如果是从按钮触发的分享
    if (res.from === 'button') {
      // 如果有当前邀请的队伍，使用队伍信息
      if (this.currentInviteTeam) {
        // 分享成功后关闭邀请弹窗
        setTimeout(() => {
          this.hideInvitePopup();
          uni.showToast({
            title: '分享成功',
            icon: 'success'
          });
        }, 500);

        // 获取新的随机标题和图片
        const shareData = getRandomShareTitleWithImage();
        return {
          title: shareData.title,
          path: `/pages/team/detail?id=${this.currentInviteTeam.id}`,
          imageUrl: shareData.imageUrl
        };
      }

      // 使用通用分享配置
      return {
        title: this.shareConfig.title,
        path: this.shareConfig.path,
        imageUrl: this.shareConfig.imageUrl
      };
    }

    // 默认分享
    return {
      title: "王者荣耀开黑组队，一起上分！",
      path: '/pages/team/index',
      imageUrl: ''
    };
  },
  // #endif
  computed: {
    ...mapState({
      vuex_status_bar_height: state => state.vuex_status_bar_height,
      userInfo: state => state.user.userInfo // 添加userInfo的映射
    }),
    ...mapGetters('app', [
      'isMpWeixin',
      'isH5',
      'isApp'
    ])
  },
  onShow() {
  	this.fetchUserGameAccounts();
  },
  methods: {
    // 获取队伍列表
    async queryList(pageNo, pageSize) {
      try {
        // 构建请求参数，只包含有值的参数
        const params = {
          page: pageNo,
          size: pageSize
        };

        // 添加当前用户ID，用于后端判断用户是否已加入队伍
        const userId = uni.getStorageSync('userId');
        if (userId) {
          params.userId = userId;
        }

        // 只有不是'all'时才添加teamType参数
        if (this.currentTeamType !== 'all') {
          params.teamType = this.getTeamTypeValue(this.currentTeamType);
        }

        // 只有不是'all'时才添加areaType参数
        if (this.currentServerType !== 'all') {
          params.areaType = this.getAreaTypeValue(this.currentServerType);
        }

        // 只有不是0时才添加rankLevel参数
        if (this.currentRankId !== 0) {
          params.rankLevel = this.currentRankId;
        }

        // 添加当前选中的游戏账号ID参数
        if (this.currentGameAccount && this.currentGameAccount.id && this.currentGameAccount.auditStatus !== 2) {
          params.accountId = this.currentGameAccount.id;
        }

        // 调用后端API获取队伍列表
        const res = await getGameKingTeamPage(params);

        // 处理返回的数据
        const pageData = res.list || [];
        const total = res.total || 0;

        // 转换后端数据为前端需要的格式
        const teamList = pageData.map(team => this.convertTeamData(team));

        // 通知z-paging组件数据加载完毕
        this.$refs.paging.complete(teamList);
      } catch (e) {
        // 处理异常情况
        console.error('获取队伍列表失败', e);
        this.$refs.paging.complete(false);
      }
    },

    // 转换团队数据格式
    convertTeamData(team) {
      // 获取对应的段位名称
      const rankName = this.getRankNameByLevel(team.rankLevel);

      // 获取当前登录用户ID
      const userId = uni.getStorageSync('userId');

      // 设置默认头像
      const defaultAvatar = 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/f58cad729ce47acb65666e57496f5e2e0c8badfec8355cfc7d6f2645f8738e60.jpeg';

      // 构建成员列表
      const members = team.members.map(member => {
        return {
          id: member.id, // 添加成员ID，用于退出队伍
          userId: member.userId, // 添加用户ID，用于标识当前用户
          avatar: member.avatar || defaultAvatar,
          position: member.position,
          name: member.nickname,
          gameId: member.gameId,
          contactNumber: member.contact,
          sex: member.sex, // 添加性别字段
          isContactUnlocked: team.canDecrypt === true,
          isCurrentUser: member.userId === userId // 添加标识，用于识别当前用户
        };
      });

      // 构建位置信息
      const positions = [
        { id: 1, name: '上单', isOccupied: false },
        { id: 2, name: '打野', isOccupied: false },
        { id: 3, name: '中单', isOccupied: false },
        { id: 4, name: '射手', isOccupied: false },
        { id: 5, name: '辅助', isOccupied: false }
      ];

      // 标记已占用的位置
      team.members.forEach(member => {
        const posIndex = positions.findIndex(pos => pos.id === member.position);
        if (posIndex !== -1) {
          positions[posIndex].isOccupied = true;
        }
      });

      // 返回转换后的团队数据
      return {
        id: team.id,
        creatorId: team.userId, // 添加创建者ID，用于聊天功能
        creatorName: team.nickname || '', // 即使是空字符串也保留，让模板中的逻辑处理
        creatorAvatar: team.avatar || defaultAvatar, // 确保队长头像有默认值
        creatorGender: team.gender, // 直接使用数字格式
        rankName: rankName,
        serverType: team.areaType === 1 ? 'wechat' : 'qq',
        teamType: this.getTeamTypeKey(team.teamType),
        creatorSuccessCount: team.successCount || 0, // 假设后端会返回成功组队次数
        title: team.title,
        description: team.description || '',
        teamStatus: this.getTeamStatusText(team.status),
        createTime: this.formatTime(team.createTime),
        currentMembers: members.length,
        maxMembers: 5,
        location: team.location || '未知',
        positions: positions,
        members: members,
        isContactUnlocked: team.canDecrypt === true,
        joinedByCurrentUser: team.joinedByCurrentUser || false,
        isTeamFull: team.isTeamFull === true, // 队伍是否满员
        // 添加已加入的队伍成员ID，方便退出操作
        joinedMemberId: team.joinedByCurrentUser ? members.find(m => m.isCurrentUser)?.id : null
      };
    },

    // 获取团队状态文本
    getTeamStatusText(status) {
      switch(status) {
        case 0: return '招募中';
        case 1: return '已解散';
        case 2: return '已完成';
        default: return '招募中';
      }
    },

    // 根据段位ID获取段位名称
    getRankNameByLevel(rankLevel) {
      return getRankNameById(rankLevel);
    },

    // 根据key获取teamType的值
    getTeamTypeValue(key) {
      const typeMap = {
        'fun': 1, // 娱乐局
        'rank': 2, // 排位赛
        'social': 3 // 找对象
      };
      return typeMap[key] || undefined;
    },

    // 根据值获取teamType的key
    getTeamTypeKey(value) {
      const typeMap = {
        1: 'fun',   // 娱乐局
        2: 'rank',  // 排位赛
        3: 'social' // 找对象
      };
      return typeMap[value] || 'fun';
    },

    // 根据key获取areaType的值
    getAreaTypeValue(key) {
      const areaMap = {
        'wechat': 1, // 微信区
        'qq': 2      // QQ区
      };
      return areaMap[key] || undefined;
    },

    // 格式化时间
    formatTime(time) {
      if (!time) return '';

      // 这里可以根据需求格式化时间，例如：多久之前
      const now = new Date().getTime();
      const createTime = new Date(time);
      const diff = now - createTime;

      // 小于1分钟
      if (diff < 60000) {
        return '刚刚';
      }
      // 小于1小时
      if (diff < 3600000) {
        return Math.floor(diff / 60000) + '分钟前';
      }
      // 小于1天
      if (diff < 86400000) {
        return Math.floor(diff / 3600000) + '小时前';
      }
      // 大于1天
      return Math.floor(diff / 86400000) + '天前';
    },

    // 模拟数据方法保留，以防需要回退
    getMockTeams() {
      return Array(10).fill(0).map((_, index) => {
        // 创建空的位置数组
        const positions = [
          { id: 1, name: '上单', isOccupied: false },
          { id: 2, name: '打野', isOccupied: false },
          { id: 3, name: '中单', isOccupied: false },
          { id: 4, name: '射手', isOccupied: false },
          { id: 5, name: '辅助', isOccupied: false }
        ];

        // 获取随机段位
        const randomRank = this.ranks[Math.floor(Math.random() * this.ranks.length)];

        // 随机选择服务器类型（微信区或QQ区）
        const serverType = Math.random() > 0.5 ? 'wechat' : 'qq';

        // 随机选择队伍类型
        const teamTypes = ['rank', 'fun', 'social'];
        const teamType = teamTypes[Math.floor(Math.random() * teamTypes.length)];

        // 随机确定成员数量(1-4人)
        const memberCount = Math.floor(Math.random() * 4) + 1;

        // 为每个成员分配唯一的位置
        const usedPositionIndices = [];
        const members = [];

        // 从5个位置中随机选择memberCount个不重复的位置
        while (usedPositionIndices.length < memberCount) {
          const posIndex = Math.floor(Math.random() * 5);
          if (!usedPositionIndices.includes(posIndex)) {
            usedPositionIndices.push(posIndex);

            // 标记该位置为已占用
            positions[posIndex].isOccupied = true;

            // 获取随机段位名称
            const memberRank = this.ranks[Math.floor(Math.random() * this.ranks.length)].name;

            // 添加成员，包含游戏ID和联系方式
            members.push({
              avatar: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/f58cad729ce47acb65666e57496f5e2e0c8badfec8355cfc7d6f2645f8738e60.jpeg',
              rank: memberRank, // 直接使用段位名称
              position: positions[posIndex].id, // 使用位置ID
              name: `玩家${index}${posIndex}`,
              gameId: `WZ${Math.floor(Math.random() * 10000) + 10000}`, // 随机生成游戏ID
              contactNumber: serverType === 'wechat' ? `wx${Math.floor(Math.random() * 10000) + 10000}` : `${Math.floor(Math.random() * 1000000000) + 1000000000}`, // 随机生成联系方式
              isContactUnlocked: false, // 默认联系方式不可见
              auditStatus: Math.floor(Math.random() * 3) // 模拟审核状态
            });
          }
        }

        // 检查队伍是否已满(5人)
        const isTeamFull = members.length === 5;

        // 如果队伍已满，解锁所有成员的联系方式
        if (isTeamFull) {
          members.forEach(member => {
            member.isContactUnlocked = true;
          });
        }

        // 生成随机的队长成功组队次数 (0-20次)
        const creatorSuccessCount = Math.floor(Math.random() * 21);

        // 根据队伍类型生成适当的标题
        let title = '';
        if (teamType === 'rank') {
          title = `找${index + 2}个王者荣耀${randomRank.name}一起排位`;
        } else if (teamType === 'fun') {
          title = `${randomRank.name}娱乐开黑，随意玩玩`;
        } else {
          title = `${randomRank.name}找对象，要求声音好听`;
        }

        // 返回团队数据
        return {
          id: index + 1,
          creatorName: `玩家${index + 1}`,
          creatorAvatar: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/f58cad729ce47acb65666e57496f5e2e0c8badfec8355cfc7d6f2645f8738e60.jpeg',
          creatorGender: index % 2 === 0 ? 1 : 2, // 数字格式：1为男性，2为女性
          rankName: randomRank.name,
          serverType: serverType, // 添加区服信息
          teamType: teamType, // 添加队伍类型
          creatorSuccessCount: creatorSuccessCount, // 添加队长成功组队次数
          title: title,
          description: '来个大神带带我，线上五排，麦克风交流',
          teamStatus: index % 3 === 0 ? '招募中' : (index % 3 === 1 ? '即将开始' : '正在游戏'),
          createTime: '10分钟前',
          currentMembers: members.length,
          maxMembers: 5,
          location: '魔都',
          positions: positions,
          members: members,
          isContactUnlocked: isTeamFull, // 只有满员时才解锁联系方式
          joinedByCurrentUser: false, // 标记当前用户是否已加入
          joinTime: null // 模拟数据中不包含joinTime
        };
      });
    },

    // 选择段位
    selectRank(rankId) {
      this.currentRankId = rankId;
      this.$refs.paging.reload();
    },

    // 选择区服
    selectServer(serverType) {
      this.currentServerType = serverType;
      this.$refs.paging.reload();
    },

    // 加入队伍
    joinTeam(team) {
      // 检查队伍是否已满员且用户已加入
      if (team.joinedByCurrentUser && team.currentMembers >= team.maxMembers) {
        // 队伍已满员且用户已加入，不执行任何操作
        return;
      }

      // 检查用户是否已加入队伍
      if (team.joinedByCurrentUser) {
        // 已加入当前队伍，直接退出
        this.leaveTeam(team);
        return;
      }

      // 检查当前账号是否已选择
      if (!this.currentGameAccount || !this.currentGameAccount.id) {
        uni.showToast({
          title: '请先选择游戏账号',
          icon: 'none'
        });
        this.showAccountSelector();
        return;
      }

      // 用户未加入任何队伍，继续加入流程
      this.processJoinTeam(team);
    },

    // 处理加入队伍的逻辑
    processJoinTeam(team) {
      // 获取可选的位置
      const availablePositions = team.positions.filter(position => !position.isOccupied);

      // 如果没有可用位置
      if (availablePositions.length === 0) {
        uni.showToast({
          title: '该队伍所有位置已被占用',
          icon: 'none'
        });
        return;
      }

      // 显示位置选择弹窗
      this.showPositionSelector(team, availablePositions);
    },

    // 显示位置选择弹窗
    showPositionSelector(team, availablePositions) {
      // 构建位置选择列表
      const positionList = availablePositions.map(position => position.name);

      uni.showActionSheet({
        itemList: positionList,
        success: (res) => {
          const selectedPosition = availablePositions[res.tapIndex];
          this.confirmJoinTeam(team, selectedPosition);
        },
        fail: () => {
          // 用户取消选择
        }
      });
    },

    // 确认加入队伍
    async confirmJoinTeam(team, selectedPosition) {
      uni.showModal({
        title: '确认加入',
        content: `您选择的位置是【${selectedPosition.name}】，是否确认加入"${team.title}"队伍？`,
        success: async (res) => {
          if (res.confirm) {
            try {

              // 构造加入队伍的请求参数
              const joinData = {
                teamId: team.id,
                accountId: this.currentGameAccount.id,
                contact: this.currentGameAccount.contactNumber,
                position: selectedPosition.id
              };

              // 调用后端接口加入队伍
              const { joinGameKingTeam } = require('@/api/game/index.js');
              const memberId = await joinGameKingTeam(joinData);

              // 直接在内存中更新队伍数据，而不是重新请求整个列表
              this.updateTeamAfterJoin(team, selectedPosition, memberId);

              // 根据加入后的队伍人数显示不同提示
              if (team.currentMembers === 5) {
                // 满员时查询最新队伍详情以确保解锁状态
                try {
                  // 请求最新队伍详情
                  const teamDetail = await getGameKingTeam(team.id);

                  if (teamDetail && teamDetail.canDecrypt) {
                    // 用最新的详情更新本地数据
                    const teamIndex = this.teamList.findIndex(t => t.id === team.id);
                    if (teamIndex !== -1) {
                      // 更新解锁状态
                      this.teamList[teamIndex].isContactUnlocked = true;

                      // 更新成员信息，包括解密后的联系方式和游戏ID
                      const updatedMembers = [];
                      // 默认头像
                      const defaultAvatar = 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/f58cad729ce47acb65666e57496f5e2e0c8badfec8355cfc7d6f2645f8738e60.jpeg';

                      teamDetail.members.forEach(member => {
                        updatedMembers.push({
                          id: member.id,
                          userId: member.userId,
                          avatar: member.avatar || defaultAvatar, // 头像为空时使用默认头像
                          position: member.position,
                          name: member.nickname,
                          gameId: member.gameId,
                          contactNumber: member.contact,
                          isContactUnlocked: true,
                          isCurrentUser: member.userId === uni.getStorageSync('userId')
                        });
                      });
                      this.teamList[teamIndex].members = updatedMembers;
                    }

                    // 显示解锁成功提示 - 与详情页保持一致
                    uni.showModal({
                      title: '加入成功',
                      content: '恭喜！队伍已满员，游戏ID和联系方式已解锁，快去联系队友开始游戏吧！',
                      showCancel: false,
                      confirmText: '知道了'
                    });
                  } else {
                    // 如果后端返回未解锁，仍然保留本地状态
                    uni.showModal({
                      title: '加入成功',
                      content: '队伍已满员，正在解锁游戏ID和联系方式...',
                      showCancel: false,
                      confirmText: '知道了'
                    });
                  }
                } catch (error) {
                  console.error('获取队伍详情失败:', error);
                  // 出错时仍显示基本提示
                  uni.showModal({
                    title: '加入成功',
                    content: '恭喜！队伍已满员，游戏ID和联系方式已解锁，快去联系队友开始游戏吧！',
                    showCancel: false,
                    confirmText: '知道了'
                  });
                }
              } else if (team.currentMembers === 1) {
                // 仅有自己一人时，直接显示邀请好友对话框
                this.showInviteFriendsDialog(team);
              } else {
                // 队伍未满且不止一人，显示邀请好友对话框
                this.showInviteFriendsDialog(team);
              }

              // 不再刷新队伍列表
              // this.$refs.paging.reload();

            } catch (error) {
              console.error('加入队伍失败:', error);

              // 检查是否是账号区服与队伍区服不一致的错误
              if (error.code === 1018001204) {

                // 显示提示对话框
                uni.showModal({
                  title: '账号区服不匹配',
                  content: '您当前选择的账号区服与队伍区服不一致，需要切换到匹配的账号才能加入',
                  confirmText: '去切换',
                  success: (res) => {
                    if (res.confirm) {
                      // 用户点击确认，显示账号选择器
                      this.showAccountSelector();
                    }
                  }
                });
              } else {
                // 其他错误正常提示
                uni.showToast({
                  title: error.message || error.msg || '加入队伍失败，请稍后重试',
                  icon: 'none'
                });
              }
            }
          }
        }
      });
    },

    // 离开队伍
    async leaveTeam(team) {
      uni.showModal({
        title: '确认退出',
        content: '是否确认退出该队伍？',
        success: async (res) => {
          if (res.confirm) {
            try {
              uni.showLoading({
                title: '退出中...',
                mask: true
              });

              // 检查是否有成员ID
              if (!team.joinedMemberId) {
                throw new Error('未找到您在该队伍中的信息');
              }

              // 调用后端接口退出队伍
              const { leaveGameKingTeam } = require('@/api/game/index.js');
              await leaveGameKingTeam(team.joinedMemberId);

              // 关闭加载提示
              uni.hideLoading();

              // 显示退出成功提示
              uni.showToast({
                title: '已退出队伍',
                icon: 'success'
              });

              // 直接在内存中更新队伍数据
              this.updateTeamAfterLeave(team);

              // 不再刷新队伍列表
              // this.$refs.paging.reload();

            } catch (error) {
              uni.hideLoading();
              console.error('退出队伍失败:', error);
              uni.showToast({
                title: error.msg || error.message || '退出队伍失败，请稍后重试',
                icon: 'none'
              });
            }
          }
        }
      });
    },

    // 与创建者聊天
    chatWithCreator(team) {
      uni.navigateTo({
        url: `/pages/chat/index?userId=${team.creatorId}&username=${team.creatorName}`
      });
    },

    // 创建队伍
    createTeam() {
      uni.showModal({
        title: '提示',
        content: '创建队伍功能正在开发中',
        showCancel: false
      });
    },

    // 刷新
    onRefresh() {
      this.$refs.paging.reload();
    },

    // 滚动到底部
    handleScrollToLower() {
      // 加载更多数据
    },

    // 滚动到顶部
    handleScrollToUpper() {
      this.showBackToTop = false;
    },

    // 滚动事件
    handleScroll(e) {
      this.scrollTop = e.scrollTop;
      if (e.scrollTop > 200) {
        this.showBackToTop = true;
      } else {
        this.showBackToTop = false;
      }
    },

    // 回到顶部
    scrollToTop() {
      this.isScrollingToTop = true;
      this.$refs.paging.scrollToTop(0);
      setTimeout(() => {
        this.isScrollingToTop = false;
      }, 500);
    },

    // 获取位置名称
    getPositionName(team, positionId) {
      const position = team.positions.find(pos => pos.id === positionId);
      return position ? position.name : '未知位置';
    },

    // 复制游戏ID
    copyGameId(gameId) {
      uni.setClipboardData({
        data: gameId,
        success: () => {
          uni.showToast({
            title: '游戏ID已复制到剪贴板',
            icon: 'success'
          });
        },
        fail: () => {
          uni.showToast({
            title: '复制游戏ID失败',
            icon: 'none'
          });
        }
      });
    },

    // 复制联系方式
    copyContact(contactNumber) {
      uni.setClipboardData({
        data: contactNumber,
        success: () => {
          uni.showToast({
            title: '联系方式已复制到剪贴板',
            icon: 'success'
          });
        },
        fail: () => {
          uni.showToast({
            title: '复制联系方式失败',
            icon: 'none'
          });
        }
      });
    },

    // 获取用户游戏账号列表
    async fetchUserGameAccounts() {
      this.accountsLoading = true;
      try {
        const res = await getUserGameAccounts();
        if (res && res.length > 0) {
          // 获取当前登录用户的头像
          const userAvatar = this.userInfo?.avatar || 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/f58cad729ce47acb65666e57496f5e2e0c8badfec8355cfc7d6f2645f8738e60.jpeg';

          // 转换后端数据格式为前端使用的格式
          this.gameAccounts = res.map(account => {
            return {
              id: account.id,
              nickname: account.gameId,
              avatar: userAvatar, // 使用用户头像替代游戏账号头像
              rank: this.getRankNameByLevel(account.rankLevel),
              gameId: account.gameId,
              serverType: account.areaType === 1 ? 'wechat' : 'qq',
              contactNumber: account.contact,
              auditStatus: account.auditStatus, // 审核状态
              isDefault: account.isDefault === 1 // 是否为默认账号
            };
          });

          // 首先按默认状态排序，然后按审核状态排序
          this.gameAccounts.sort((a, b) => {
            // 默认账号优先
            if (a.isDefault && !b.isDefault) {
              return -1;
            } else if (!a.isDefault && b.isDefault) {
              return 1;
            }
            // 然后是审核通过的
            else if (a.auditStatus === 1 && b.auditStatus !== 1) {
              return -1;
            } else if (a.auditStatus !== 1 && b.auditStatus === 1) {
              return 1;
            }
            // 然后是待审核的
            else if (a.auditStatus === 0 && b.auditStatus === 2) {
              return -1;
            } else if (a.auditStatus === 2 && b.auditStatus === 0) {
              return 1;
            }
            // 如果状态相同，按ID排序
            return b.id - a.id;
          });

          // 优先选择默认账号
          const defaultAccount = this.gameAccounts.find(acc => acc.isDefault);
          if (defaultAccount) {
            this.currentGameAccount = defaultAccount;
          }
          // 如果没有默认账号，选择第一个审核通过的账号
          else {
            const approvedAccount = this.gameAccounts.find(acc => acc.auditStatus === 1);
            if (approvedAccount) {
              this.currentGameAccount = approvedAccount;
            } else if (this.gameAccounts.length > 0) {
              this.currentGameAccount = this.gameAccounts[0];
            }
          }
        } else if (this.userInfo) {
          // 如果没有游戏账号但有用户信息，更新当前账号的头像
          this.currentGameAccount.avatar = this.userInfo.avatar || this.currentGameAccount.avatar;
        }
        return res; // 返回结果，支持链式调用
      } catch (error) {
        console.error('获取游戏账号失败:', error);
        uni.showToast({
          title: '获取游戏账号失败',
          icon: 'none'
        });
        throw error; // 抛出错误，支持错误处理
      } finally {
        this.accountsLoading = false;
      }
    },

    // 显示游戏账号选择器
    showAccountSelector() {
      this.showAccountSelectorPopup = true;
      // 在弹窗打开时自动刷新账号列表
      this.fetchUserGameAccounts();
    },

    // 隐藏游戏账号选择器
    hideAccountSelector() {
      this.showAccountSelectorPopup = false;
    },

    // 切换账号选择器弹窗状态
    toggleAccountSelector() {
      if (this.showAccountSelectorPopup) {
        this.hideAccountSelector();
      } else {
        this.showAccountSelector();
      }
    },

    // 切换游戏账号
    async switchAccount(account) {
      // 检查账号审核状态，如果是已拒绝状态，先关闭弹窗再显示提示
      if (account.auditStatus === 2) {
        this.hideAccountSelector();
        // 延迟显示提示，确保弹窗完全关闭
        setTimeout(() => {
          uni.showModal({
            title: '账号已拒绝',
            content: '该账号审核未通过，无法使用。请联系客服或使用其他账号。',
            showCancel: false,
            confirmText: '我知道了'
          });
        }, 300);
        return;
      }

      try {
        // 调用后端API设置默认账号
        // 导入switchDefaultAccount函数
        const { switchDefaultAccount } = require('@/api/game/index.js');
        await switchDefaultAccount(account.id);

        // 更新当前选中的账号
        this.currentGameAccount = account;
        this.hideAccountSelector();

        // 显示切换成功提示
        uni.showToast({
          title: '账号切换成功',
          icon: 'success',
          duration: 1500
        });

      } catch (error) {
        console.error('切换账号失败:', error);
        uni.showToast({
          title: '切换账号失败，请稍后重试',
          icon: 'none'
        });
      } finally {

      }
    },

    // 添加游戏账号 - 跳转到添加账号页面
    addGameAccount() {
      uni.navigateTo({
        url: '/pages/team/add-account'
      });
    },

    // 前往组队记录页面
    goToTeamRecords() {
      uni.navigateTo({
        url: '/pages/team/team-records'
      });
    },

    // 编辑游戏账号
    editGameAccount(account) {
      // 跳转到编辑游戏账号页面
      uni.navigateTo({
        url: `/pages/team/add-account?id=${account.id}&mode=edit`
      });
    },

    // 重新提交游戏账号审核
    resubmitGameAccount(account) {
      // 跳转到重新提交审核页面
      uni.navigateTo({
        url: `/pages/team/add-account?id=${account.id}&mode=resubmit`
      });
    },

    // 切换更多筛选
    toggleMoreFilters() {
      this.showMoreFilters = !this.showMoreFilters;
    },

    // 跳转到创建队伍页面
    goToCreateTeam() {
      uni.navigateTo({
        url: '/pages/team/create'
      });
    },

    // 选择队伍类型
    selectTeamType(teamType) {
      this.currentTeamType = teamType;
      this.$refs.paging.reload();
    },

    // 刷新账号列表
    refreshAccountList() {
      this.fetchUserGameAccounts().finally(() => {
      });
    },

    // 准备分享（微信小程序环境）
    prepareShare(team) {
      // 获取随机标题和对应图片
      const shareData = getRandomShareTitleWithImage();

      // 设置分享配置
      this.shareConfig.team = team;
      this.shareConfig.title = shareData.title;
      this.shareConfig.path = `/pages/team/detail?id=${team.id}`;
      this.shareConfig.imageUrl = shareData.imageUrl;

      console.log('准备分享队伍:', team.id, '分享标题:', this.shareConfig.title, '分享图片:', this.shareConfig.imageUrl);
    },

    // 显示邀请弹窗（非微信环境）
    showInviteModal(team) {
      uni.showActionSheet({
        itemList: ['复制邀请链接'],
        success: (res) => {
          if (res.tapIndex === 0) {
            // 复制邀请链接
            this.copyInviteLink(team);
          }
        }
      });
    },

    // 分享到微信好友
    shareToWechat(team) {
      // #ifdef MP-WEIXIN
      // 在微信小程序中，直接显示邀请弹窗
      this.currentInviteTeam = team;
      this.prepareShare(team);
      this.showInvitePopup = true;
      // #endif

      // #ifndef MP-WEIXIN
      // 非微信环境，使用复制链接的方式
      this.copyInviteLink(team);
      // #endif
    },

    // 复制邀请链接
    copyInviteLink(team) {
      // 构建H5邀请链接
      const h5InviteUrl = `${config.h5URL}/#/pages/team/detail?id=${team.id}`;

      const inviteText = `${team.creatorName}邀请你加入王者荣耀队伍！\n\n队伍信息：\n人数：${team.currentMembers}/${team.maxMembers}\n开黑时间：${team.startTime}\n服务器：${team.serverType === 'qq' ? 'QQ区' : '微信区'}\n\n点击链接加入：${h5InviteUrl}`;

      uni.setClipboardData({
        data: inviteText,
        success: () => {
          uni.showToast({
            title: '邀请信息已复制',
            icon: 'success',
            duration: 2000
          });
        },
        fail: () => {
          uni.showToast({
            title: '复制失败',
            icon: 'none'
          });
        }
      });
    },

    // 邀请好友（保留原方法，用于兼容）
    inviteFriends(team) {
      // 直接显示自定义邀请弹窗
      this.currentInviteTeam = team;
      this.prepareShare(team);
      this.showInvitePopup = true;
    },

    // 创建新组队
    createNewTeam() {
      uni.navigateTo({
        url: '/pages/team/create'
      });
    },

    // 在内存中更新队伍数据(加入后)
    updateTeamAfterJoin(team, selectedPosition, memberId) {
      // 在当前队伍列表中找到要更新的队伍
      const teamIndex = this.teamList.findIndex(t => t.id === team.id);
      if (teamIndex === -1) return;

      // 获取要更新的队伍的引用
      const teamToUpdate = this.teamList[teamIndex];

      // 标记该位置为已占用
      const posIndex = teamToUpdate.positions.findIndex(pos => pos.id === selectedPosition.id);
      if (posIndex !== -1) {
        teamToUpdate.positions[posIndex].isOccupied = true;
      }

      // 创建新成员对象
      const newMember = {
        id: memberId, // 后端返回的成员ID
        userId: uni.getStorageSync('userId'), // 当前用户ID
        avatar: uni.getStorageSync('avatar') || this.currentGameAccount.avatar,
        position: selectedPosition.id,
        name: this.currentGameAccount.nickname,
        gameId: this.currentGameAccount.gameId,
        contactNumber: this.currentGameAccount.contactNumber,
        isContactUnlocked: teamToUpdate.currentMembers + 1 === 5, // 如果加入后成员数为5，则解锁联系方式
        isCurrentUser: true // 标记为当前用户
      };

      // 添加新成员
      teamToUpdate.members.push(newMember);

      // 更新当前成员数
      teamToUpdate.currentMembers++;

      // 更新"joinedByCurrentUser"状态
      teamToUpdate.joinedByCurrentUser = true;

      // 更新joinedMemberId，用于后续退出操作
      teamToUpdate.joinedMemberId = memberId;

      // 如果加入后成员数为5，更新联系方式解锁状态
      if (teamToUpdate.currentMembers === 5) {
        teamToUpdate.isContactUnlocked = true;

        // 更新所有成员的联系方式解锁状态
        teamToUpdate.members.forEach(member => {
          member.isContactUnlocked = true;
        });
      }
    },

    // 在内存中更新队伍数据(退出后)
    updateTeamAfterLeave(team) {
      // 在当前队伍列表中找到要更新的队伍
      const teamIndex = this.teamList.findIndex(t => t.id === team.id);
      if (teamIndex === -1) return;

      // 获取要更新的队伍的引用
      const teamToUpdate = this.teamList[teamIndex];

      // 找到当前用户的成员信息
      const memberIndex = teamToUpdate.members.findIndex(member => member.id === team.joinedMemberId);
      if (memberIndex === -1) return;

      // 获取用户的位置信息
      const position = teamToUpdate.members[memberIndex].position;

      // 更新该位置为未占用
      const posIndex = teamToUpdate.positions.findIndex(pos => pos.id === position);
      if (posIndex !== -1) {
        teamToUpdate.positions[posIndex].isOccupied = false;
      }

      // 从成员列表中移除该成员
      teamToUpdate.members.splice(memberIndex, 1);

      // 更新当前成员数
      teamToUpdate.currentMembers--;

      // 更新"joinedByCurrentUser"状态
      teamToUpdate.joinedByCurrentUser = false;

      // 清除joinedMemberId
      teamToUpdate.joinedMemberId = null;

      // 如果退出后成员数小于5，更新联系方式解锁状态
      if (teamToUpdate.isContactUnlocked && teamToUpdate.currentMembers < 5) {
        teamToUpdate.isContactUnlocked = false;

        // 更新所有成员的联系方式解锁状态
        teamToUpdate.members.forEach(member => {
          member.isContactUnlocked = false;
        });
      }
    },



    // 显示邀请好友弹窗
    showInviteFriendsDialog(team) {
      setTimeout(() => {
        // 使用随机文案
        const message = getRandomInviteMessage(team.currentMembers);

        // 设置分享配置，为分享做准备
        this.prepareShare(team);

        // 设置弹窗数据并显示
        this.currentInviteTeam = team;
        this.inviteMessage = message;
        this.showInvitePopup = true;
      }, 500);
    },

    // 隐藏邀请弹窗
    hideInvitePopup() {
      this.showInvitePopup = false;
      this.currentInviteTeam = null;
      this.inviteMessage = '';
    },

    // 分享按钮点击事件
    onShareButtonTap() {
      // 这个方法会在用户点击分享按钮时触发
      // 实际的分享逻辑由 onShareAppMessage 处理
      console.log('分享按钮被点击');
    },

    // 获取空位槽数组，确保索引不与成员索引重叠
    getEmptySlots(team) {
      const emptyCount = team.maxMembers - team.members.length;
      const emptySlots = [];

      for (let i = 0; i < emptyCount; i++) {
        // 为每个空位添加一个基于team.members.length的索引，确保不重复
        emptySlots.push({
          emptyId: team.members.length + i
        });
      }

      return emptySlots;
    },
  }
};
</script>

<style lang="scss" scoped>
.team-page {
  background-color: #020303;
  min-height: 100vh;
}

.nav-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #e0e0e0;
  position: relative;
  text-align: center;
  height: 70rpx;

  &::after {
    content: '';
    position: absolute;
    bottom: -10rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 40rpx;
    height: 4rpx;
    background: linear-gradient(90deg, #8eac21, #B3F73C);
    border-radius: 2rpx;
  }
}

.rank-filter, .server-filter, .team-type-filter {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.filter-header {
  display: flex;
  flex-direction: column;
}

.filter-row {
  display: flex;
  align-items: center;
  padding-right: 10rpx;
  width: 100%;
}

.filter-title {
  font-size: 26rpx;
  color: #999999;
  margin-right: 20rpx;
  white-space: nowrap;
  flex-shrink: 0;
}

.rank-list-container, .server-list-container, .type-list-container {
  flex: 1;
  overflow: hidden;
  margin: 0;
}

.rank-list, .server-list, .type-list {
  white-space: nowrap;
  width: 100%;
}

.more-filters {
  display: flex;
  align-items: center;
  color: #B3F73C;
  font-size: 24rpx;
  margin-left: 10rpx;
  flex-shrink: 0;
}

.more-filters text {
  margin-right: 6rpx;
}

.rank-item, .server-item, .type-item {
  display: inline-block;
  padding: 6rpx 16rpx;
  margin-right: 10rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  background-color: #222222;
  color: #CCCCCC;

  &.active {
    background-color: #B3F73C;
    color: #000000;
  }
}

.team-card {
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 16rpx;
  background-color: rgba(17, 17, 17, 0.8);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  transition: all 0.3s;

  &:active {
    transform: scale(0.98);
  }
}

.team-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.team-creator {
  display: flex;
  align-items: center;
}

.creator-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  border: 2rpx solid #B3F73C;
  margin-right: 15rpx;

  &.male-border {
    border: 3rpx solid #0088FF; /* 男性用蓝色边框 */
  }

  &.female-border {
    border: 3rpx solid #FF6699; /* 女性用粉色边框 */
  }
}

.creator-name {
  font-size: 28rpx;
  color: #FFFFFF;
  font-weight: bold;
}

.gender-icon {
  margin-left: 10rpx;
  font-size: 24rpx;

  &.male {
    color: #0088FF;
  }

  &.female {
    color: #FF6699;
  }
}

.creator-rank {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #CCCCCC;
  margin-top: 5rpx;
}

.rank-badge {
  display: inline-block;
  padding: 4rpx 12rpx;
  border-radius: 30rpx;
  background: linear-gradient(135deg, #3f2b0e 0%, #8b6c28 100%);
  color: #ffd04d;
  font-size: 22rpx;
  text-align: center;
  margin-right: 10rpx;

  &.small {
    padding: 2rpx 8rpx;
    font-size: 18rpx;
  }
}

.server-badge {
  display: inline-block;
  padding: 4rpx 12rpx;
  border-radius: 30rpx;
  background: rgba(179, 247, 60, 0.2);
  color: #B3F73C;
  font-size: 22rpx;
  text-align: center;
}

.team-type-badge {
  display: inline-block;
  padding: 4rpx 12rpx;
  border-radius: 30rpx;
  background: rgba(179, 247, 60, 0.2);
  color: #B3F73C;
  font-size: 22rpx;
  text-align: center;
  margin-left: 10rpx;
}

.team-status {
  font-size: 24rpx;
  color: #B3F73C;
  padding: 5rpx 15rpx;
  background-color: rgba(179, 247, 60, 0.1);
  border-radius: 20rpx;
}

.team-info {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;

  .team-title {
    color: #FFFFFF;
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }

  .team-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 24rpx;
    margin-bottom: 10rpx;
  }

  .team-details {
    display: flex;
    justify-content: space-between;
    margin-top: 16rpx;

    .team-detail {
      display: flex;
      align-items: center;

      .tn-icon-time, .tn-icon-people, .tn-icon-location {
        color: #B3F73C;
        font-size: 24rpx;
        margin-right: 6rpx;
      }

      text {
        color: rgba(255, 255, 255, 0.9);
        font-size: 22rpx;
      }
    }
  }
}

.team-members {
  display: flex;
  margin-bottom: 20rpx;
  overflow-x: auto;
  padding: 10rpx 0;

  &::-webkit-scrollbar {
    display: none;
  }
}

.team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20rpx;
  min-width: 80rpx;
  position: relative; /* 保留相对定位以便将来可能的需求 */

  &.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    border: 2rpx dashed rgba(255, 255, 255, 0.3);
    margin-right: 20rpx;

    .tn-icon-add {
      color: rgba(255, 255, 255, 0.3);
      font-size: 40rpx;
    }
  }
}

.member-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  border: 2rpx solid #B3F73C; /* 默认边框 */

  &.male-border {
    border: 3rpx solid #0088FF; /* 男性用蓝色边框 */
  }

  &.female-border {
    border: 3rpx solid #FF6699; /* 女性用粉色边框 */
  }
}

.member-position {
  color: rgba(255, 255, 255, 0.6);
  font-size: 22rpx;
  margin-top: 6rpx;
}

/* 当前用户标记 */
.current-user-badge {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  background: #B3F73C;
  color: #000000;
  font-size: 20rpx;
  font-weight: bold;
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid #020303;
}

/* 当前用户成员容器样式 */
.team-member.current-user {
  position: relative;
}

.team-member.current-user .member-avatar {
  border: 3rpx solid #B3F73C !important;
}

.game-id-panel {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.panel-title {
  color: #FFFFFF;
  font-size: 26rpx;
  font-weight: bold;
}

.lock-status {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 22rpx;

  .tn-icon-lock {
    color: #FF6B6B;
    font-size: 24rpx;
    margin-right: 6rpx;
  }

  &.unlocked {
    color: #B3F73C;

    .tn-icon-unlock {
      color: #B3F73C;
      font-size: 24rpx;
      margin-right: 6rpx;
    }
  }
}

.game-ids-list {
  .game-id-item {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
    padding: 10rpx;
    border-radius: 8rpx;
    background-color: rgba(0, 0, 0, 0.2);

    &.locked {
      background-color: rgba(0, 0, 0, 0.1);
    }

    &.current-user {
      background-color: rgba(179, 247, 60, 0.1);
      border: 2rpx solid rgba(179, 247, 60, 0.3);
    }

    .id-position {
      color: rgba(255, 255, 255, 0.6);
      font-size: 24rpx;
      margin-right: 10rpx;
      width: 60rpx;
    }

    .id-value {
      color: #FFFFFF;
      font-size: 24rpx;
      flex: 1;

      .id-row {
        display: flex;
        align-items: center;
        margin-bottom: 4rpx;

        &:last-child {
          margin-bottom: 0;
        }
      }

      .id-label {
        color: #B3F73C;
        font-size: 22rpx;
        margin-right: 8rpx;
        width: 60rpx;
      }
    }

    .id-actions {
      display: flex;
      flex-direction: column;
      margin-left: 10rpx;
    }

    .id-copy {
      color: #B3F73C;
      font-size: 24rpx;
      padding: 8rpx 10rpx;
      display: flex;
      align-items: center;
      background-color: rgba(179, 247, 60, 0.1);
      border-radius: 6rpx;
      margin-bottom: 8rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .copy-label {
        font-size: 20rpx;
        margin-left: 6rpx;
      }
    }
  }
}

.team-actions {
  display: flex;
  justify-content: space-between;
  margin: 0 20rpx 20rpx;

  .action-btn {
    height: 70rpx;
    line-height: 70rpx;
    border-radius: 35rpx;
    font-size: 26rpx;
    font-weight: bold;
    flex: 1;

    &.join-btn {
      background-color: rgba(179, 247, 60, 0.2);
      color: #B3F73C;
      margin-right: 10rpx;

      &.full {
        background-color: rgba(102, 102, 102, 0.2);
        color: #666666;
      }

      &.joined {
        background-color: rgba(255, 107, 107, 0.2);
        color: #FF6B6B;
      }

      &.completed {
        background-color: rgba(76, 175, 80, 0.2);
        color: #4CAF50;
      }
    }

    &.chat-btn {
      background-color: rgba(255, 255, 255, 0.05);
      color: #FFFFFF;

      .tn-icon-share, .tn-icon-add {
        color: #B3F73C;
        margin-right: 8rpx;
        font-size: 24rpx;
      }
    }
  }
}

.back-to-top-button {
  position: fixed;
  right: 30rpx;
  bottom: 120rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: #222222;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(100rpx);
  transition: all 0.3s;
  z-index: 9;

  &.active {
    opacity: 1;
    transform: translateY(0);
  }
}

.rocket-icon {
  position: relative;
  width: 40rpx;
  height: 60rpx;
}

.rocket-body {
  position: absolute;
  width: 40rpx;
  height: 60rpx;
  background-color: #B3F73C;
  border-radius: 50% 50% 0 0;
}

.window {
  position: absolute;
  left: 15rpx;
  top: 20rpx;
  width: 10rpx;
  height: 10rpx;
  background-color: #333333;
  border-radius: 50%;
}

.fin {
  position: absolute;
  bottom: 0;
  width: 15rpx;
  height: 25rpx;
  background-color: #B3F73C;
}

.fin-left {
  left: -15rpx;
  border-radius: 10rpx 0 0 10rpx;
}

.fin-right {
  right: -15rpx;
  border-radius: 0 10rpx 10rpx 0;
}

.exhaust-flame {
  position: absolute;
  bottom: -15rpx;
  left: 10rpx;
  width: 20rpx;
  height: 20rpx;
  background-color: #FF6633;
  border-radius: 50%;
}

.flight-path {
  position: absolute;
  width: 100%;
  height: 100%;
}

.particle {
  position: absolute;
  width: 8rpx;
  height: 8rpx;
  background-color: rgba(255, 102, 51, 0.6);
  border-radius: 50%;
  animation: fly 0.5s linear infinite;
}

@keyframes fly {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(20rpx) scale(0.3);
    opacity: 0;
  }
}

.scroll-effect {
  position: fixed;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 8;
}

.star {
  position: absolute;
  width: 6rpx;
  height: 6rpx;
  background-color: #FFFFFF;
  border-radius: 50%;
  animation: star-fall 0.5s linear;
}

@keyframes star-fall {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

.invite-tip {
  display: flex;
  align-items: center;
  padding: 16rpx 20rpx;
  background-color: rgba(179, 247, 60, 0.1);
  border-radius: 12rpx;
  margin: 0 20rpx 20rpx 20rpx;

  .tn-icon-info {
    color: #B3F73C;
    font-size: 28rpx;
    margin-right: 10rpx;
  }

  text {
    color: #B3F73C;
    font-size: 24rpx;
  }
}

// 游戏账号选择器样式
.nav-left {
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 18rpx;
}

.account-selector {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 35rpx;
  padding: 6rpx 16rpx;
  z-index: 9999;

  .account-avatar {
    width: 52rpx;
    height: 52rpx;
    border-radius: 50%;
    margin-right: 9rpx;
  }

  .account-info {
    display: flex;
    flex-direction: column;
    margin-right: 9rpx;
    max-width: 160rpx; /* 增加最大宽度，容纳更多文字 */
    overflow: hidden;

    .account-name {
      font-size: 22rpx;
      color: #FFFFFF;
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
    }

    .account-rank-server {
      display: flex;
      align-items: center;
      margin-top: 2rpx;

      .account-server {
        font-size: 16rpx;
        color: rgba(255, 255, 255, 0.8);
        background-color: rgba(179, 247, 60, 0.15);
        padding: 0 6rpx;
        border-radius: 6rpx;
        margin-right: 6rpx;
      }

      .account-rank {
        font-size: 16rpx;
        font-weight: bold;
        color: #B3F73C;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .account-arrow {
    font-size: 22rpx;
    color: #B3F73C;
  }
}

// 账号选择弹窗样式
.account-popup {
  background-color: #202020;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  padding: 30rpx;

  .account-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .popup-title {
      font-size: 32rpx;
      color: #FFFFFF;
      font-weight: bold;
    }

    .refresh-btn {
      font-size: 36rpx;
      color: #B3F73C;
      padding: 10rpx;
      margin-left: auto;
      margin-right: 20rpx;
      transition: transform 0.3s;

      &:active {
        transform: rotate(180deg);
      }
    }

    .tn-icon-close {
      font-size: 40rpx;
      color: rgba(255, 255, 255, 0.7);
    }
  }

  // 组队记录入口样式
  .team-records-entry {
    display: flex;
    align-items: center;
    padding: 20rpx 10rpx;
    background-color: rgba(179, 247, 60, 0.08);
    border-radius: 16rpx;
    margin-bottom: 30rpx;

    .records-icon {
      color: #B3F73C;
      font-size: 36rpx;
      margin-right: 20rpx;
    }

    .records-text {
      flex: 1;
      color: #FFFFFF;
      font-size: 28rpx;
      font-weight: bold;
    }

    .records-arrow {
      color: rgba(255, 255, 255, 0.7);
      font-size: 28rpx;
    }
  }

  // 加载状态样式
  .loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40rpx 0;

    .loading-spinner {
      width: 60rpx;
      height: 60rpx;
      border: 8rpx solid #B3F73C;
      border-top-color: transparent;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 20rpx;
    }

    .loading-text {
      color: #999999;
      font-size: 28rpx;
    }
  }

  // 无账号提示样式
  .empty-account-tip {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40rpx 0;
    color: #999999;
    font-size: 28rpx;

    .empty-icon {
      font-size: 40rpx;
      margin-bottom: 10rpx;
    }

    .empty-text {
      margin-bottom: 10rpx;
    }

    .empty-sub-text {
      font-size: 22rpx;
      color: rgba(255, 255, 255, 0.5);
    }
  }

  .account-list {
    margin-bottom: 40rpx;

    .account-item {
      display: flex;
      align-items: center;
      padding: 20rpx 10rpx;
      border-radius: 20rpx;
      margin-bottom: 20rpx;

      &.active {
        background-color: rgba(179, 247, 60, 0.1);
      }

      // 移除头像样式
      .item-avatar {
        display: none; // 隐藏头像但保留引用以防报错
      }

      .item-info {
        flex: 1;

        .item-name {
          font-size: 28rpx;
          color: #FFFFFF;
          margin-bottom: 12rpx;
        }

        .item-game-rank {
          display: flex;
          align-items: center;
          margin-top: 6rpx;

          .item-server {
            font-size: 22rpx;
            color: rgba(255, 255, 255, 0.6);
            margin-right: 10rpx;
            background-color: rgba(255, 255, 255, 0.1);
            padding: 2rpx 10rpx;
            border-radius: 10rpx;
          }

          .item-rank {
            font-size: 22rpx;
            font-weight: bold;
            color: #B3F73C;
            background-color: rgba(179, 247, 60, 0.15);
            padding: 2rpx 10rpx;
            border-radius: 10rpx;
          }

          // 添加状态标签样式
          .item-status {
            font-size: 20rpx;
            padding: 4rpx 10rpx;
            border-radius: 10rpx;
            margin-left: 10rpx;

            &.status-pending {
              color: #FF9900;
              background-color: rgba(255, 153, 0, 0.1);
            }

            &.status-approved {
              color: #00CC66;
              background-color: rgba(0, 204, 102, 0.1);
            }

            &.status-rejected {
              color: #FF6B6B;
              background-color: rgba(255, 107, 107, 0.1);
            }
          }
        }
      }

      .item-actions {
        display: flex;
        align-items: center;

        .item-check {
          font-size: 40rpx;
          color: #B3F73C;
          margin-right: 15rpx;
        }

        .item-edit {
          font-size: 36rpx;
          color: #FFFFFF;
          opacity: 0.7;

          &:active {
            opacity: 1;
          }
        }
      }
    }
  }

  .account-popup-footer {
    .add-account-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 80rpx;
      border-radius: 40rpx;
      background-color: #B3F73C;
      color: #000000;
      font-size: 28rpx;
      font-weight: bold;

      .tn-icon-add {
        margin-right: 10rpx;
      }
    }
  }
}

.creator-success-count {
  display: flex;
  align-items: center;
  margin-top: 4rpx;
  font-size: 22rpx;
  color: #B3F73C;

  .tn-icon-flag {
    margin-right: 6rpx;
    font-size: 22rpx;
  }
}

/* 创建队伍按钮样式 */
.fab-button {
  position: fixed;
  right: 30rpx;
  bottom: 160rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: #B3F73C;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10rpx 20rpx rgba(179, 247, 60, 0.3);
  z-index: 999;

  .tn-icon-add {
    color: #000000;
    font-size: 50rpx;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.account-list-scroll {
  max-height: 550rpx; /* 设置最大高度，超出时滚动 */
  width: 100%;
  margin-bottom: 20rpx;
}

.account-list {
  width: 100%;
  padding: 20rpx 10rpx;
}

.account-item {
  display: flex;
  align-items: center;
  padding: 20rpx 20rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  background-color: rgba(255, 255, 255, 0.05);
  transition: all 0.3s;
  border: 1rpx solid transparent;

  &:active {
    opacity: 0.8;
  }

  &.active {
    background-color: rgba(179, 247, 60, 0.15);
    border: 1rpx solid rgba(179, 247, 60, 0.3);
  }

  &.disabled {
    opacity: 0.6;
    background-color: rgba(255, 107, 107, 0.05);
    cursor: not-allowed;

    &:active {
      opacity: 0.6;
    }
  }

  .item-info {
    flex: 1;

    .item-name {
      font-size: 30rpx;
      color: #FFFFFF;
      font-weight: 500;
      margin-bottom: 12rpx;
    }

    .item-game-rank {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 6rpx;

      .item-server {
        font-size: 22rpx;
        color: rgba(255, 255, 255, 0.7);
        margin-right: 12rpx;
        background-color: rgba(255, 255, 255, 0.1);
        padding: 4rpx 12rpx;
        border-radius: 12rpx;
      }

      .item-rank {
        font-size: 22rpx;
        font-weight: bold;
        color: #B3F73C;
        background-color: rgba(179, 247, 60, 0.15);
        padding: 4rpx 12rpx;
        border-radius: 12rpx;
      }

      // 状态标签样式
      .item-status {
        font-size: 20rpx;
        padding: 4rpx 12rpx;
        border-radius: 12rpx;
        margin-left: 12rpx;

        &.status-pending {
          color: #FF9900;
          background-color: rgba(255, 153, 0, 0.15);
          border: 1rpx solid rgba(255, 153, 0, 0.3);
        }

        &.status-approved {
          color: #00CC66;
          background-color: rgba(0, 204, 102, 0.15);
          border: 1rpx solid rgba(0, 204, 102, 0.3);
        }

        &.status-rejected {
          color: #FF6B6B;
          background-color: rgba(255, 107, 107, 0.15);
          border: 1rpx solid rgba(255, 107, 107, 0.3);
        }
      }
    }
  }

  .item-actions {
    display: flex;
    align-items: center;
    margin-right: 10rpx;

    .item-check {
      color: #B3F73C;
      font-size: 42rpx;
      margin-right: 24rpx;
    }

    .item-edit {
      color: rgba(255, 255, 255, 0.7);
      font-size: 36rpx;
      background-color: rgba(255, 255, 255, 0.1);
      padding: 8rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      &:active {
        background-color: rgba(255, 255, 255, 0.2);
      }
    }

    .item-resubmit {
      color: #FF9900;
      font-size: 36rpx;
      background-color: rgba(255, 153, 0, 0.15);
      padding: 8rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1rpx solid rgba(255, 153, 0, 0.3);

      &:active {
        background-color: rgba(255, 153, 0, 0.25);
      }
    }
  }
}

// 邀请弹窗样式
.invite-popup {
  background-color: #202020;
  border-radius: 20rpx;
  padding: 40rpx;
  width: 600rpx;

  .invite-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .popup-title {
      font-size: 36rpx;
      color: #FFFFFF;
      font-weight: bold;
    }

    .close-btn {
      font-size: 32rpx;
      color: #999999;
      padding: 10rpx;
    }
  }

  .invite-content {
    text-align: center;
    margin-bottom: 40rpx;

    .invite-icon {
      margin-bottom: 20rpx;

      .tn-icon-team-fill {
        font-size: 80rpx;
        color: #B3F73C;
      }
    }

    .invite-message {
      font-size: 28rpx;
      color: #CCCCCC;
      line-height: 1.6;
      display: block;
    }
  }

  .invite-actions {
    display: flex;
    gap: 20rpx;

    .invite-btn {
      flex: 1;
      height: 80rpx;
      border-radius: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      font-weight: bold;
      border: none;

      .tn-icon-share,
      .tn-icon-copy {
        font-size: 32rpx;
        margin-right: 10rpx;
      }

      &.share-btn {
        background-color: #B3F73C;
        color: #000000;
      }

      &.copy-btn {
        background-color: #333333;
        color: #FFFFFF;
      }

      &.full-width {
        width: 100%;
      }
    }
  }
}
</style>
